<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>打印服务</title>
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="stylesheet" href="./element-ui/index.css" />
  <script src="./js/vue.min.js"></script>
  <script src="./element-ui/index.js"></script>
</head>

<body>
  <div id="app" class="box">
    <div class="background">
      <div class="bg-primary" :class="{active: !printing}"></div>
      <div class="bg-warning" :class="{active: printing}"></div>
    </div>
    <div class="container">
      <div class="info">
        <div class="title">
          打印服务已启动
        </div>
        <div class="message row">
          服务地址：<span>{{ webHttp }}</span>
        </div>
        <div class="message row">设备编号：<span>{{ deviceId }}</span></div>
      </div>
      <div class="status">
        <div class="message">
          打印状态：<span>{{ printing ? "文档打印中" : "空闲" }}</span>
        </div>
        <div class="message">
          客户端版本：{{ version }}
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: () => {
        return {
          webHttp: "",
          deviceId: "",
          version: "",
          printing: false,
        };
      },
      async created() {
        await this.getAppInfo();
        this.init();
      },
      methods: {
        async getAppInfo() {
          const info = await window.api.getAppInfo();
          // console.log("info", info);
          this.version = info.version;
          this.webHttp = info.webHttp;
          this.deviceId = info.deviceId;
          this.printing = info.printing;
        },
        init() {
          setInterval(async () => {
            await this.getAppInfo();
          }, 1000);
        }
      },
    });
  </script>
</body>
</html>